<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../../Templates/SubFolderTemplate.xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="head-title">
        <title>Add Production Plan | Merlion's ERP System</title>
    </ui:define>
    <ui:define name="content">
        <f:view beforePhase="#{generateSalesOperationPlan.initView(event)}"></f:view>
        <p:panel id="panel2" header="Production Plan">
            <p:panel rendered="#{generateSalesOperationPlan.showChoice}">
                <h:form>
                    <h:outputText value="Choose your action: "/>
                    <p:commandButton value="View Production Plan" actionListener="#{generateSalesOperationPlan.showView(event)}" update="panel2"/>
                    <p:commandButton value="Add new Production Plan" actionListener="#{generateSalesOperationPlan.showAdd(event)}" update="panel2"/>
                </h:form>
            </p:panel>
            <p:panel id="panel1" header="View Monthly Production Plan" rendered="#{generateSalesOperationPlan.showView}">
                <h:form prependId="false">
                <p:messages />
                <h:selectOneMenu value="#{generateSalesOperationPlan.startMonthView}" required="true" requiredMessage="Input start month.">
                    <f:selectItem itemLabel="Select One" itemValue="" />  
                    <f:selectItems value="#{generateSalesOperationPlan.monthList}" />  
                </h:selectOneMenu>

                <h:selectOneMenu value="#{generateSalesOperationPlan.endMonthView}" required="true" requiredMessage="Input end month.">
                    <f:selectItem itemLabel="Select One" itemValue="" />  
                    <f:selectItems value="#{generateSalesOperationPlan.monthList}" />  
                </h:selectOneMenu>

                <p:commandButton value="View Monthly Production Plan" actionListener="#{generateSalesOperationPlan.view(event)}" update="panel1" ajax="true" />
                <br/>
                </h:form>
            </p:panel>

            <h:form prependId="false">
                <p:panel id ="panel" header="Add Production Plan" rendered="#{generateSalesOperationPlan.showAdd}">
                    <p:messages />
                    <h:selectOneMenu value="#{generateSalesOperationPlan.startMonth}" required="true" requiredMessage="Input start month.">
                        <f:selectItem itemLabel="Select One" itemValue="" />  
                        <f:selectItems value="#{generateSalesOperationPlan.startMonths}" />  
                    </h:selectOneMenu>

                    <h:selectOneMenu value="#{generateSalesOperationPlan.endMonth}" required="true" requiredMessage="Input end month.">
                        <f:selectItem itemLabel="Select One" itemValue="" />  
                        <f:selectItems value="#{generateSalesOperationPlan.endMonths}" />  
                    </h:selectOneMenu>

                    <p:commandButton value="Retrieve Sales Forecast" actionListener="#{generateSalesOperationPlan.retrieveMonthlyData(event)}" update="panel" ajax="true" />
                    <br/>
                    <!--                   -->
                    <p:separator rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}"/>

                    <p:fieldset id="fieldsetSalesForecast" legend="Sale Forecast" rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}">
                        <p:dataTable id="tableA" var="monthlyData" value="#{generateSalesOperationPlan.monthlyData}">  
                            <p:column style="width: 50px">
                                <f:facet name="header">
                                    Month
                                </f:facet> 
                                <h:outputText value="#{monthlyData.monthName}" /> 
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    A
                                </f:facet> 
                                <h:outputText value="#{monthlyData.saleForecastA}"  /> 
                            </p:column> 
                            <p:column>
                                <f:facet name="header">
                                    B
                                </f:facet> 
                                <h:outputText value="#{monthlyData.saleForecastB}"  /> 
                            </p:column> 
                            <p:column >
                                <f:facet name="header">
                                    C
                                </f:facet> 
                                <h:outputText value="#{monthlyData.saleForecastC}"/> 
                            </p:column> 
                            <p:column>
                                <f:facet name="header">
                                    D
                                </f:facet> 
                                <h:outputText value="#{monthlyData.saleForecastD}" /> 
                            </p:column> 
                        </p:dataTable>
                    </p:fieldset>
                    <p:separator rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}"/>
                    <p:fieldset id ="fieldsetProductionPlan" legend="Production Plan"  rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}">
                        <p:dataTable id="tableB" var="monthlyData" value="#{generateSalesOperationPlan.monthlyData}">
                            <p:column style="width: 50px">
                                <f:facet name="header">
                                    Month
                                </f:facet> 
                                <h:outputText value="#{monthlyData.monthName}" /> 
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    Production Plan
                                </f:facet> 
                                <p:inputText id="productionPlan" value="#{monthlyData.productionPlan}" style="width: 150px" 
                                             required="true" requiredMessage="Production Plan required."/> 
                                <p:message for="productionPlan"/>
                            </p:column>
                        </p:dataTable>
                    </p:fieldset>
                    <p:separator rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}"/>
                    <p:fieldset id="fieldsetInventory" legend="Inventory"  rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}">
                        <p:message for="refreshBtn"/>      
                        <p:dataTable id="tableC" var="monthlyData" value="#{generateSalesOperationPlan.monthlyData}">
                            <p:column style="width: 50px">
                                <f:facet name="header">
                                    Month
                                </f:facet> 
                                <h:outputText value="#{monthlyData.monthName}" /> 
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    A
                                </f:facet> 
                                <h:outputText value="#{monthlyData.inventoryA}"  /> 
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    B
                                </f:facet> 
                                <h:outputText value="#{monthlyData.inventoryB}"  /> 
                            </p:column>
                            <p:column >
                                <f:facet name="header">
                                    C
                                </f:facet> 
                                <h:outputText value="#{monthlyData.inventoryC}"/> 
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    D
                                </f:facet> 
                                <h:outputText value="#{monthlyData.inventoryD}" /> 
                            </p:column>
                        </p:dataTable>
                    </p:fieldset>
                    <p:separator rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}"/>
                    <p:fieldset id="fieldsetPercentage" legend="Breakdown Percentage"  rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}">
                        <h:panelGrid id="panelGrid" columns="6" cellpadding ="4">
                            <h:outputText value="A: "/>
                            <p:inputText id="breakdownA" value="#{generateSalesOperationPlan.breakDownA}" style="width: 100px" required="true" requiredMessage="Breakdown required."/> 
                            <p:message for="breakdownA"/>

                            <h:outputText value="B: "/>
                            <p:inputText id="breakdownB" value="#{generateSalesOperationPlan.breakDownB}" style="width: 100px" required="true" requiredMessage="Breakdown required."/> 
                            <p:message for="breakdownB"/>

                            <h:outputText value="C: "/>
                            <p:inputText id="breakdownC" value="#{generateSalesOperationPlan.breakDownC}" style="width: 100px" required="true" requiredMessage="Breakdown required."/> 
                            <p:message for="breakdownC"/>

                            <h:outputText value="D: "/>
                            <p:inputText id="breakdownD" value="#{generateSalesOperationPlan.breakDownD}" style="width: 100px" required="true" requiredMessage="Breakdown required."/> 
                            <p:message for="breakdownD"/>
                        </h:panelGrid>
                    </p:fieldset>
                    <p:commandButton id="refreshBtn" value="Refresh" actionListener="#{generateSalesOperationPlan.refresh(event)}" update="panel" ajax="true"  rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}"/>
                    <p:commandButton value="Submit" actionListener="#{generateSalesOperationPlan.generate(event)}" update="panel" ajax="true"  rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}"/>
                </p:panel>
            </h:form>
        </p:panel>
    </ui:define>
</ui:composition>